import { PlusOutlined } from '@ant-design/icons';
import { ModalForm, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, Form, message, theme } from 'antd';
import React from 'react';

const AddForm: React.FC = () => {
  const { token } = theme.useToken();
  const { initialState } = useModel('@@initialState');
  const waitTime = (time: number = 100) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
      }, time);
    });
  };
  const [form] = Form.useForm<{ name: string; company: string }>();
  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title="添加仓库"
      trigger={
        <div>
          <span>{'添加仓库   '}</span>
          <Button
            type="dashed"
            shape="circle"
            color="primary"
            icon={<PlusOutlined style={{ fontSize: '22px' }} twoToneColor="#fff" />}
          ></Button>
        </div>
      }
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('run'),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        await waitTime(2000);
        console.log(values.name);
        message.success('提交成功');
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormSelect
          width="xs"
          options={[
            {
              value: 'gitee',
              label: 'gitee',
            },
            {
              value: 'github',
              label: 'github',
            },
          ]}
          name="unusedMode"
          label="线上平台"
        />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="html_url"
            label="仓库地址"
            tooltip="示例值: https://gitee.com/xrj111/big-event.git"
            placeholder="请输入地址"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="html_name"
            label="仓库全名"
            tooltip="示例值: xrj111/mytest"
            placeholder="请输入地址"
          />
        </ProForm.Group>
    </ModalForm>
  );
};

export default AddForm;
